<template>
    <el-row :gutter="20" class="home">
        <el-col :span="8" style="margin-top:20px">
            <el-card shadow="hover">
                <div class="user">
                    <img :src="require('../../assets/images/user.png')" />
                    <div class="userinfo">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间:<span>2021-7-19</span></p>
                    <p>上次登录地点:<span>天津市河东区</span></p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top:20px;height:460px">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        v-for="item in tableLabel"
                        :key="item.variable"
                        header-align="center"
                        align="center"
                        :prop="item.variable"
                        :label="item.name" >
                    </el-table-column>
                </el-table>
            </el-card>
            
        </el-col>
        <el-col :span="16" style="margin-top:20px">
            <div class="num">
                <el-card v-for="(item,i) in countData" :key="i" shadow="always" :body-style="{ display: 'flex', padding: 0 }">
                    <i :class="`icon el-icon-${item.icon}`" :style="{ backgroundColor:item.color }"></i>
                    <div class="detail">
                        <p class="num">￥{{ item.value }}</p>
                        <p class="txt">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <div>
                <el-card shadow="always" :body-style="{ padding: '20px' }" style="height: 280px">
                    <echarts style="height:280px" :options="options.order"></echarts>
                </el-card>
                <div class="graph">
                    <el-card style="height: 260px">
                        <echarts style="height:240px" :options="options.user"></echarts>
                    </el-card>
                    <el-card style="height: 260px">
                        <echarts style="height:240px" :options="options.video"></echarts>
                    </el-card>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import { getData } from '../../api/data.js';
import Echarts from '../../components/Echarts.vue';

export default {
    name: 'home',
    components: {
        Echarts
    },
    data() {
        return {
            tableData: [],
            tableLabel: [
                {name: '课程', variable: 'name'},
                {name: '总购买', variable: 'totalBuy'},
                {name: '本月购买', variable: 'monthBuy'}
            ],
            countData: [
                {
                name: "今日支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "今日收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "今日未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                },
                {
                name: "本月支付订单",
                value: 1234,
                icon: "success",
                color: "#2ec7c9",
                },
                {
                name: "本月收藏订单",
                value: 210,
                icon: "star-on",
                color: "#ffb980",
                },
                {
                name: "本月未支付订单",
                value: 1234,
                icon: "s-goods",
                color: "#5ab1ef",
                }
            ],
            options: {
                order: {},
                user: {},
                video: {}
            }
        }
    },
    mounted() {
        getData().then(res => {
            // console.log(res);
            const { code, data } = res.data;
            if(code === 20000){
                this.tableData = data.tableData;

                {//折线图
                    const order = data.orderData;
                    const keysArray = Object.keys(order.data[0]);
                    let orderSeries = [];
                    keysArray.forEach(key => {
                        orderSeries.push({
                            name: key,
                            type: 'line',
                            data: order.data.map(item => item[key])
                        });
                    });
                    this.options.order = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: keysArray
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: order.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: orderSeries
                    };
                    // console.log(JSON.stringify(this.orderOptions));
                }
                {//柱状图
                    const user = data.userData;
                    this.options.user = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['新增用户','活跃用户']
                        },
                        xAxis: {
                            type: 'category',
                            data: user.map(item => item.date),
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                color: "#333",
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3",
                                },
                            }
                        },
                        color: ["#2ec7c9", "#b6a2de"],
                        series: [
                            {
                                data: user.map(item => item.new),
                                type: 'bar',
                                name: '新增用户'
                            },
                            {
                                data: user.map(item => item.active),
                                type: 'bar',
                                name: '活跃用户'
                            }
                        ]
                    };
                }
                {//饼状图
                    const video = data.videoData;
                    this.options.video = {
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '75%',
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data: video
                            }
                        ]
                    };
                }
            }
        });
    }
}
</script>
<style scoped>
    
</style>